<template>
  <div class="template-container">
    <div class="form">
      <div class="form-title">诉讼材料导出</div>
      <div class="item-title">被告人基本信息</div>
      <div class="form-item">
        <div class="label">姓名：</div>
        <div class="body">
          <Input v-model="info.beigao.name" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">性别:</div>
        <div class="body">
          <Dropdown @on-click="sexChange">
            <a href="javascript:void(0)">
              {{ info.beigao.sex }}
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="男">男</DropdownItem>
              <DropdownItem name="女">女</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>

      <div class="form-item">
        <div class="label">出生日期：</div>
        <div class="body">
          <DatePicker
            @on-change="timeChange"
            format="yyyy年MM月dd日"
            type="date"
            placeholder="选择日期"
            style="width: 200px"
          ></DatePicker>
        </div>
      </div>

      <div class="form-item">
        <div class="label">民族：</div>
        <div class="body">
          <Input v-model="info.beigao.minzu" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">身份证号：</div>
        <div class="body">
          <Input v-model="info.beigao.shenfenNum" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">住址：</div>
        <div class="body">
          <Input v-model="info.beigao.address" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">联系电话：</div>
        <div class="body">
          <Input v-model="info.beigao.phone" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">担保金额：</div>
        <div class="body">
          <Input v-model="info.beigao.DBJE" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">账户总额：</div>
        <div class="body">
          <Input v-model="info.beigao.total" />
        </div>
      </div>

      <div class="item-title">原告基本信息</div>
      <div class="form-item">
        <div class="label">原告单位：</div>
        <div class="body">
          <Input v-model="info.yuangao.yg" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">地址：</div>
        <div class="body">
          <Input v-model="info.yuangao.ygAddress" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">社会信用代码:</div>
        <div class="body">
          <Input v-model="info.yuangao.SHXYDM" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">纠纷类型:</div>
        <div class="body">
          <Dropdown @on-click="JFLXChange">
            <a href="javascript:void(0)">
              {{ info.yuangao.JFLX }}
              <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="保证保险合同纠纷"
                >保证保险合同纠纷</DropdownItem
              >
              <DropdownItem name="保险人代位求偿权纠纷"
                >保险人代位求偿权纠纷</DropdownItem
              >
              <DropdownItem name="追偿权纠纷">追偿权纠纷</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </div>

      <div class="form-item">
        <div class="label">负责人：</div>
        <div class="body">
          <Input v-model="info.yuangao.FZR" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">代理人：</div>
        <div class="body">
          <Input v-model="info.yuangao.DLR.peo1" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="body">
          <Input v-model="info.yuangao.DLR.peo2" />
        </div>
      </div>

      <div class="form-item">
        <div class="label">案号：</div>
        <div class="body">
          <Input v-model="info.yuangao.PJSNum" />
        </div>
      </div>
    </div>
    <Button
      class="download-btn"
      size="large"
      icon="ios-download-outline"
      type="primary"
      :loading="loading"
      shape="circle"
      @click="downloadFile"
    ></Button>
  </div>
</template>
<script>
import { exportSSCL } from "@/api";
export default {
  data() {
    return {
      loading: false,
      sexs: [
        { label: "男", value: "男" },
        { label: "女", value: "女" }
      ],
      info: {
        beigao: {
          name: "",
          sex: "男",
          birth: "",
          minzu: "汉",
          shenfenNum: "",
          address: "",
          phone: "",
          DBJE: 0,
          total: 0
        },
        yuangao: {
          yg: "中国大地财产保险股份有限公司",
          JFLX: "保证保险合同纠纷",
          ygAddress: "",
          FZR: "",
          SHXYDM: "",
          PJSNum: "",
          DLR: {
            peo1: "程律师，上海xxxx律师事务所律师，159xxxxxxx2",
            peo2: "      ，上海xxxx律师事务所律师，           "
          },
          DLRObj: {
            peo1: {
              name: "程律师",
              lsName: "上海xxxx律师事务所律师",
              phone: "159xxxxxxx2"
            },
            peo2: {
              name: "    ",
              lsName: "上海xxxx律师事务所律师",
              phone: ""
            }
          }
        }
      }
    };
  },
  computed: {},
  beforeCreate() {
    if (!window.user) {
      this.$router.replace("/login");
    }
  },
  mounted() {
    this.isShow = true;
  },
  methods: {
    getFZR(i) {
      let data = this.yuangao.FZR[i];
      let res = "";
      if (data.name) {
        res += data.name;
      } else {
        res += "   ";
      }
      res += data.lsName + ",";
      res += data.phone;
      return res;
    },
    checkUser() {
      if (!window.user) {
        this.$router.replace("/login");
      }
    },
    timeChange(value) {
      this.info.beigao.birth = value;
    },
    sexChange(value) {
      this.info.beigao.sex = value;
    },
    JFLXChange(value) {
      this.info.yuangao.JFLX = value;
    },
    clone(obj) {
      let temp = null;
      if (obj instanceof Array) {
        temp = obj.concat();
      } else if (obj instanceof Function) {
        // 函数是共享的是无所谓的，js也没有什么办法可以在定义后再修改函数内容
        temp = obj;
      } else {
        temp = new Object();
        Object.keys(obj).forEach(key => {
          let val = obj[key];
          temp[key] = typeof val == "object" ? this.clone(val) : val; // 这里也没有判断是否为函数，因���对于函数，我们将它和一般值一样处理
        });
      }
      return temp;
    },
    async downloadFile() {
      let data = this.clone(this.info);
      data.yuangao.peo2 = data.yuangao.DLR.peo2;
      data.yuangao.peo1 = data.yuangao.DLR.peo1;
      let dlrArr = data.yuangao.DLR.peo2.split("，");
      let dlrArr1 = data.yuangao.DLR.peo1.split("，");
      data.yuangao.peo1Name = dlrArr1[0];
      data.yuangao.peo1Phone = dlrArr1[2];
      if (dlrArr.length <= 1) {
        dlrArr = data.yuangao.DLR.peo2.split(",");
      }
      if (!dlrArr[0].trim()) {
        data.yuangao.peo2Name = "      ";
      } else {
        data.yuangao.peo2Name = dlrArr[0].trim();
      }

      if (!dlrArr[2].trim()) {
        data.yuangao.peo2Phone = "";
      } else {
        data.yuangao.peo2Phone = dlrArr[2].trim();
      }
      console.log(JSON.stringify(data));
      // let url = "http://122.51.140.204:3000/word2";
      await exportSSCL(data);
      window.location.href =
        "http://122.51.140.204:3000/output/result/result.zip";
      // axios
      //   .post(url, data, {
      //     headers: {
      //       "Access-Control-Allow-Origin": "*",
      //       Accept: "application/json",
      //       "Content-Type": "application/json"
      //     }
      //   })
      //   .then(
      //     res => {
      //       if (res.status == 200) {
      //         window.location.href =
      //           "http://122.51.140.204:8080/law-back/output/result/result.zip";
      //       }
      //       this.loading = false;
      //     },
      //     error => {
      //       this.loading = false;
      //     }
      //   );
    }
  }
};
</script>
<style scoped>
.template-container {
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: auto;
}
.template-container .form {
  width: 40%;
  display: inline-block;
  height: 100%;
  margin-bottom: 20%;
}
.template-container .form .form-title {
  width: 100%;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  padding: 1rem 0;
}

.template-container .form .item-title {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: left;
  padding: 1rem 0;
}

.template-container .form .form-item {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0;
  font-size: 1rem;
}

.template-container .form .form-item .label {
  width: 8rem;
  display: inline-block;
}

.template-container .form .form-item .body {
  width: calc(100% - 8rem);
  display: inline-block;
}
.template-container .download-btn {
  position: absolute !important;
  bottom: 3rem;
  right: 15%;
}
</style>
